Custom Submit Button

The design of the submit button is defined by the CSS (located in the index.php Landing Page file).  To change the design of your submit button, you just have to add some CSS code for the type of button you would like to add.

If you looking for some creative designs, I can suggest CSS3 buttons by Chad Mazzola. 

The following assumes that you created a campaign with the " No Template" option - giving you full control of the HTML for the landing page. 

1. Open the index.php File

The index.php file is the file located on your server that hosts the landing page.  You can access this page through the same FTP that you used to create your campaign. 

2. Add the CSS code to the head

Within the <head> tags, add the following CSS Code: 

<style type="text/css">
 .button {
    //CSS Code here
 }
</style>

Where you see the //CSS Code here, paste in the CSS code that you would like to use to design your button.  For example, If I was using Chad Mazzola's cupid-green button, my final CSS code would look something like this... 

<style type="text/css">
.button {
   background-color: #7fbf4d;
   background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7fbf4d), color-stop(100%, #63a62f));
   background-image: -webkit-linear-gradient(top, #7fbf4d, #63a62f);
   background-image: -moz-linear-gradient(top, #7fbf4d, #63a62f);
   background-image: -ms-linear-gradient(top, #7fbf4d, #63a62f);
   background-image: -o-linear-gradient(top, #7fbf4d, #63a62f);
   background-image: linear-gradient(top, #7fbf4d, #63a62f);
   border: 1px solid #63a62f;
   border-bottom: 1px solid #5b992b;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
  -webkit-box-shadow: inset 0 1px 0 0 #96ca6d;
   -moz-box-shadow: inset 0 1px 0 0 #96ca6d;
   box-shadow: inset 0 1px 0 0 #96ca6d;
   color: #fff;
   font: bold 11px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif
   line-height: 1;
   padding: 7px 0 8px 0;
   text-align: center;
   text-shadow: 0 -1px 0 #4c9021;
   width: 150px; 
}
.button:hover {
   background-color: #76b347;
   background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #76b347), color-stop(100%, #5e9e2e));
   background-image: -webkit-linear-gradient(top, #76b347, #5e9e2e);
   background-image: -moz-linear-gradient(top, #76b347, #5e9e2e);
   background-image: -ms-linear-gradient(top, #76b347, #5e9e2e);
   background-image: -o-linear-gradient(top, #76b347, #5e9e2e);
   background-image: linear-gradient(top, #76b347, #5e9e2e);
   -webkit-box-shadow: inset 0 1px 0 0 #8dbf67;
   -moz-box-shadow: inset 0 1px 0 0 #8dbf67;
   box-shadow: inset 0 1px 0 0 #8dbf67;
   cursor: pointer; 
}
.button:active {
   border: 1px solid #5b992b;
   border-bottom: 1px solid #538c27;
   -webkit-box-shadow: inset 0 0 8px 4px #548c29, 0 1px 0 0 #eeeeee;
   -moz-box-shadow: inset 0 0 8px 4px #548c29, 0 1px 0 0 #eeeeee;
   box-shadow: inset 0 0 8px 4px #548c29, 0 1px 0 0 #eeeeee; }
</style>